
<!-- 注册组件 -->
<template>

    <!-- 大盒子 -->
    <div class="bigbox">
        <!-- 内容盒子 -->
        <div class="con">
            <h2 >用户注册</h2>
            <!-- 内容盒子里面的输入框盒子 -->
            <div class="ipt">

                <div class="smallbox">
                    <span>ID:</span>
                    <el-input v-model="obj.id" placeholder="请输入ID" @input='changeid'></el-input>
                </div>
                <div class="smallbox">
                    <span>状态:</span>
                    <el-input v-model="obj.state" placeholder="状态--1 有效 0 无效"></el-input>
                </div>
                <div class="smallbox">
                    <span>姓名:</span>
                    <el-input v-model="obj.name" placeholder="请输入名字"></el-input>
                </div>
                <div class="smallbox">
                    <span>密码:</span>
                    <el-input v-model="obj.password" placeholder="请输入密码" :type="'password'"></el-input>
                </div>
                <div class="smallbox">
                    <span>头像:</span>
                    <el-input v-model="obj.photo" placeholder="上传头像"></el-input>
                </div>
                <div class="smallbox">
                    <span class="elsebox">性别:</span>
                    <el-radio v-model="obj.sex" label="1" fill='white' text-color="#ffffff">女</el-radio>
                    <el-radio v-model="obj.sex" label="2" fill='white'>男</el-radio>
                </div>
                 <div class="smallbox">
                    <span>地址:</span>
                    <el-input v-model="obj.address" placeholder="请输入地址"></el-input>
                </div>
                 <div class="smallbox">
                    <span class="elsebox">生日:</span>
                    <el-date-picker
                        v-model="obj.birthday"
                        align="right"
                        type="date"
                        placeholder="选择日期"
                        :picker-options="obj.pickerOptions">
                    </el-date-picker>
                </div>
                 <div class="smallbox">
                    <span class="elsebox">induction:</span>
                    <el-date-picker
                        v-model="obj.induction"
                        align="right"
                        type="date"
                        placeholder="选择日期"
                        :picker-options="obj.pickerOptions">
                    </el-date-picker>
                </div>
                 <div class="smallbox">
                    <span>部门:</span>
                    <el-input v-model="obj.dept" placeholder="请输入部门"></el-input>
                </div>
                 <div class="smallbox">
                    <span>职位:</span>
                    <el-input v-model="obj.position" placeholder="请输入职位"></el-input>
                </div>
                 <div class="smallbox">
                    <span>电话:</span>
                    <el-input v-model="obj.phone" placeholder="请输入电话"></el-input>
                </div>
                 <div class="smallbox">
                    <span>邮箱:</span>
                    <el-input v-model="obj.email" placeholder="请输入邮箱"></el-input>
                </div>
                 <div class="smallbox">
                    <span>角色:</span>
                    <el-input v-model="obj.role" placeholder="请输入角色"></el-input>
                </div>
                <div class="smallbox">
                    <span>标注:</span>
                    <el-input v-model="obj.remark" placeholder="请输入备注"></el-input>
                </div>
                <div class="smallbox">
                    <el-button type="primary" @click="registerEvt" class="btn">注册</el-button>
                </div>
            </div>
        </div>
    </div>
 
</template>

<script>
    //引入注册接口
    import {userregisterApi} from '../../apis/register'
    //引入样式
    import './register.less'
    export default{
        //初始化数据
        data(){
            return{
                obj:{
                    id:'lbj',
                    state:'1',
                    name:'lbj',
                    password:'lbj',
                    photo:'/photo/user.png',
                    sex:'1',
                    address:'成都市',
                    dept:'销售部门',
                    position:'经理',
                    phone:'13941419428',
                    email:'1239186428@qq.com',
                    role:'ROLE-165233',
                    remark:'用户属于保密人员',
                    pickerOptions: {
                    disabledDate(time) {
                        return time.getTime() > Date.now();
                    },
                    shortcuts: [{
                        text: '今天',
                        onClick(picker) {
                        picker.$emit('pick', new Date());
                        }
                    }, {
                        text: '昨天',
                        onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() - 3600 * 1000 * 24);
                        picker.$emit('pick', date);
                        }
                    }, {
                        text: '一周前',
                        onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', date);
                        }
                    }]
                    },
                birthday:'',
                induction: '',
            }
                
        };
    },
    methods:{
        changeid(){
            // if(!this.obj.phone || !/^1[3-9]{1}[0-9]{9}$/.test(this.obj.phone)){
                if(!this.obj.id || /^[a-z0-9]{6}$/i.test(this.obj.id)){
                    this.$message('id输入错误,长度在6以内')
                    return
                }
        },
        //注册点击事件
        registerEvt(){
            userregisterApi(this.obj).then(it=>{
                this.$message({
                    message:`${it.message}`
                })
            })
        //将每行数据清空
           this.obj.id = ''
           this.obj.state = ''
           this.obj.name = ''
           this.obj.password = ''
           this.obj.photo = ''
           this.obj.sex = ''
           this.obj.address = ''
           this.obj.dept = ''
           this.obj.position = ''
           this.obj.phone = ''
           this.obj.email = ''
           this.obj.role = ''
           this.obj.remark = ''
           this.obj.birthday = ''
           this.obj.induction = ''
        }
    } 
}
</script>
